<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>

        <box>
            <!-- 鼠标 -->
            <p style="color: red">买贵包赔</p>
            <p style="color: green"> 京东超市 </p>
        </box>
    </div>
</body>

<template id="box">
    <div>
        <img src="https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/268412/26/27409/152452/67c594b3F1db25933/e4024b1b3d853848.jpg!q70.dpg.webp"
            alt="">

        <slot></slot>
        <h3>海飞丝</h3>
        <!-- 插槽的出口，相当于USB接口 -->
        <slot></slot>
        <!-- 
            slot 是插槽的出口，可以一次插入一个或者多个标签，slot是用来占位置用的，后面的内容
            会显示在这个地方
            一个组件中出现多个 slot 标签，会导致插槽的内容显示两次
            想办法让一个插槽出口只放一个标签
        -->
    </div>
</template>

<script>

    const box = {
        template: '#box'
    }

    const app = {
        data() {
            return {}
        },
        methods: {},
        components: {
            box
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>